<template>
    <div class="step1">
        <el-form
            ref="formRef"
            class="step_form"
            :model="propsFormData"
            :rules="formRule"
            label-width="120px"
            :disabled="propsLook">
            <div class="con_title">规则基本信息</div>
            <el-form-item label="规则名称" prop="name" style="margin-bottom: 14px">
                <el-input v-model="propsFormData.name" maxlength="15" placeholder="请输入规则名称" show-word-limit />
            </el-form-item>
            <el-form-item
                :class="{ mar0_form_item: propsFormData.validity_type == 2 }"
                label="规则有效期"
                prop="validity_type"
                style="margin-bottom: 6px">
                <el-radio-group v-model="propsFormData.validity_type">
                    <el-radio label="1" value="1">永久</el-radio>
                    <el-radio label="2" value="2">固定期限</el-radio>
                </el-radio-group>
            </el-form-item>
            <template v-if="propsFormData.validity_type == 2">
                <el-form-item class="notShow_formItem_required" label=" " prop="validity_time">
                    <el-date-picker
                        v-model="propsFormData.validity_time"
                        :default-time="defaultTime()"
                        type="datetimerange"
                        format="YYYY-MM-DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        :disabled-date="disabledDate" />
                </el-form-item>
            </template>
            <el-form-item label="规则描述">
                <el-input
                    v-model="propsFormData.desc"
                    :autosize="{
                        minRows: 4
                    }"
                    placeholder="请输入规则描述"
                    type="textarea"
                    maxlength="50"
                    show-word-limit />
            </el-form-item>
            <div class="con_title step1_two">SOP触发范围</div>
            <el-form-item label="SOP场景" prop="trigger_range.sop_scene" style="margin-bottom: 14px">
                <el-select
                    v-model="propsFormData.trigger_range.sop_scene"
                    :disabled="['edit', 'look'].includes(route.query.type)"
                    @change="changeSopsence">
                    <el-option v-for="item in sopSence" :key="item.id" :value="item.id" :label="item.name">
                        {{ item.name }}
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="触发员工" prop="trigger_range.trigger_staff" style="margin-bottom: -2px">
                <el-radio-group v-model="propsFormData.trigger_range.trigger_staff">
                    <el-radio label="1" value="1">全部员工</el-radio>
                    <el-radio label="2" value="2">指定员工</el-radio>
                </el-radio-group>
            </el-form-item>
            <template v-if="propsFormData.trigger_range.trigger_staff == 2">
                <el-form-item
                    class="notShow_formItem_required"
                    label=" "
                    prop="trigger_range.trigger_work_user_ids"
                    style="margin-bottom: 6px">
                    <div>
                        <el-button type="primary" :disabled="creators.length >= 10" @click="openDepart">
                            选择员工
                        </el-button>
                        <span style="margin-left: 10px">最多只能添加10位</span>
                    </div>
                    <div v-if="creators.length" class="user_list">
                        <el-tag
                            v-for="tag in creators"
                            :key="tag.id"
                            class="user_item_tag"
                            :closable="!propsLook"
                            type="info"
                            @close="removeDepart(tag.id)">
                            <img class="tag_icon" src="@/assets/image/LiveCode/people_icon.png" alt="" />
                            {{ tag.name }}
                        </el-tag>
                    </div>
                </el-form-item>
            </template>
            <el-form-item label="目标客户" prop="trigger_range.target_cust_type" style="margin-bottom: -2px">
                <el-radio-group v-model="propsFormData.trigger_range.target_cust_type">
                    <el-radio :label="1" value="1">全部企微客户</el-radio>
                    <el-radio :label="2" value="2">指定企微客户</el-radio>
                </el-radio-group>
            </el-form-item>
            <template v-if="propsFormData.trigger_range.target_cust_type == 2">
                <el-form-item prop="trigger_range.target_cust_tag_type">
                    <el-select v-model="propsFormData.trigger_range.target_cust_tag_type" @change="changeTagType">
                        <el-option
                            v-for="item in tagTypeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                    <el-button
                        v-if="[1, 2, 3, 4].includes(propsFormData.trigger_range.target_cust_tag_type)"
                        class="mar10"
                        plan
                        :icon="Plus"
                        @click="openAddTag(1)"
                        >添加标签</el-button
                    ><span
                        v-show="
                            [1, 2, 3, 4].includes(propsFormData.trigger_range.target_cust_tag_type) &&
                            targetTag.length > 0
                        ">
                        已选标签
                        <span class="tag-num">{{ targetTag.length }}</span>
                        个
                    </span>
                    <div>
                        <el-tag
                            v-for="(item, index) in targetTag.slice(0, 6)"
                            :key="index"
                            class="tag-item"
                            :closable="!propsLook"
                            @close="handleTagClose(item, 1)"
                            >{{ item.name }}</el-tag
                        >
                        <el-tag v-if="targetTag.length > 6" class="tag-item tag-many" @click="openAddTag(1)"
                            >...</el-tag
                        >
                    </div>
                </el-form-item>
            </template>
            <!-- 客户唤醒 -->
            <template v-if="propsFormData.trigger_range.sop_scene == 1">
                <el-form-item class="" label="触发条件" style="margin-bottom: 6px" prop="trigger_range.wake_object">
                    <el-radio-group v-model="propsFormData.trigger_range.wake_object">
                        <el-radio label="1" value="1">未跟进客户</el-radio>
                        <el-radio label="2" value="2">
                            <div class="reply">
                                <p>客户多久未回复</p>
                                <el-popover :width="250" effect="dark" trigger="hover" placement="top">
                                    <template #reference>
                                        <p class="view_icon">
                                            <el-icon><InfoFilled /></el-icon>
                                        </p>
                                    </template>
                                    <template #default>
                                        <p>
                                            使用该项，请开通会话内容存档功能。<span
                                                class="goOpen"
                                                @click="router.push('/channelconfig/qywechat/messagesave')">
                                                去开通
                                            </span>
                                        </p>
                                        <p>为确保该功能正常使用，请确保会话存档的员工账号在有效期内。</p>
                                    </template>
                                </el-popover>
                            </div>
                        </el-radio>
                    </el-radio-group>
                    <!-- 客户阶段 -->
                    <el-form-item
                        v-if="propsFormData.trigger_range.wake_object == 1"
                        class="cust_state_box"
                        prop="trigger_range.cust_stage.stage_id">
                        <span>当客户处于</span>
                        <el-select
                            v-model="propsFormData.trigger_range.cust_stage.stage_id"
                            class="cust_stage_type"
                            placeholder="请选择客户阶段">
                            <!-- <el-option value="0" label="0">请选择客户阶段</el-option> -->
                            <el-option v-for="item in state_list" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                        <span>，员工超过</span>
                        <el-input
                            v-model="propsFormData.trigger_range.cust_stage.time"
                            class="cust_stage_number"
                            min="1"
                            type="number">
                            <template #append>天</template>
                        </el-input>
                        <span>未添加跟进记录时，触发该SOP</span>
                    </el-form-item>
                    <!-- 消息回复 -->
                    <el-form-item
                        v-if="propsFormData.trigger_range.wake_object == 2"
                        class="cust_message_box"
                        prop="trigger_range.wake_object">
                        <span>客户超过</span>
                        <el-input
                            v-model="propsFormData.trigger_range.msg_reply.time"
                            class="cust_message_min"
                            min="1"
                            type="number">
                            <template #append>
                                <el-select
                                    v-model="propsFormData.trigger_range.msg_reply.time_type"
                                    class="cust_message_time"
                                    placeholder="请选择客户阶段">
                                    <el-option value="day" label="天">天</el-option>
                                    <el-option value="hour" label="小时">小时</el-option>
                                    <el-option value="minute" label="分钟">分钟</el-option>
                                </el-select>
                            </template>
                        </el-input>
                        <span>未回复员工企微信息时，触发该SOP</span>
                    </el-form-item>
                </el-form-item>
            </template>
            <!-- 触发条件 -->
            <template v-if="[2, 3].includes(propsFormData.trigger_range.sop_scene)">
                <el-form-item
                    label="触发条件"
                    :prop="
                        propsFormData.trigger_range.sop_scene == 2
                            ? 'trigger_range.trigger_condition.type'
                            : 'trigger_range.trigger_condition.cust_stage'
                    "
                    class="trigger_item">
                    <span>{{ propsFormData.trigger_range.sop_scene == 2 ? '客户' : '当客户进入' }}</span>
                    <template v-if="propsFormData.trigger_range.sop_scene == 2">
                        <el-select
                            v-model="propsFormData.trigger_range.trigger_condition.type"
                            class="mar10"
                            placeholder="选择客户阶段">
                            <el-option label="添加企微员工" value="1">添加企微员工</el-option>
                            <el-option label="成为新客户" value="2">
                                <el-popover
                                    placement="top-start"
                                    :width="200"
                                    trigger="hover"
                                    content="第一次进入客户列表的拥有手机号的客户">
                                    <template #reference> <span>成为新客户</span> </template>
                                </el-popover>
                            </el-option>
                        </el-select>
                    </template>
                    <template v-else>
                        <el-select
                            v-model="propsFormData.trigger_range.trigger_condition.cust_stage"
                            class="mar10"
                            placeholder="选择客户阶段">
                            <el-option v-for="item in state_list" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </template>
                    <span>时,触发该SOP</span>
                </el-form-item>
            </template>
            <!-- 生日周期 -->
            <template v-if="propsFormData.trigger_range.sop_scene == 4">
                <el-form-item class="birth_container" label="生日周期" prop="trigger_range.birth_cycle">
                    <div class="birth_box">
                        <span>当客户生日在</span>
                        <el-date-picker
                            v-model="propsFormData.trigger_range.birth_cycle"
                            class="birth_pick"
                            type="daterange"
                            format="MM/DD"
                            value-format="MM/DD"
                            range-separator="～"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期" />
                        <span>时，触发该SOP</span>
                    </div>
                </el-form-item>
            </template>
            <!-- 节日 -->
            <template v-if="propsFormData.trigger_range.sop_scene == 5">
                <el-form-item class="mar0_form_item" label="节日周期" prop="trigger_range.festival_cycle">
                    <el-radio-group v-model="propsFormData.trigger_range.festival_cycle" @change="changeFestival">
                        <el-radio label="1" value="1">固定节日</el-radio>
                        <el-radio label="2" value="2">特殊节日</el-radio>
                    </el-radio-group>
                    <!-- 固定节日 -->
                    <template v-if="propsFormData.trigger_range.festival_cycle == 1">
                        <el-form-item
                            class="notShow_formItem_required"
                            prop="trigger_range.festival_cycle_info.festival_date">
                            <el-select
                                v-model="propsFormData.trigger_range.festival_cycle_info.festival_date"
                                placeholder="选择节日"
                                popper-class="zw-hide_select_option"
                                @click="openHoliday">
                                <el-option
                                    v-for="item in holiday_list"
                                    :key="item.festival_name"
                                    :label="item.festival_name"
                                    :value="item.date"></el-option>
                            </el-select>
                        </el-form-item>
                    </template>
                    <!-- 特殊节日 -->
                    <template v-else>
                        <el-form-item
                            class="festival_name"
                            label="节日名称"
                            label-width="80px"
                            label-position="left"
                            prop="trigger_range.festival_cycle_info.festival_name">
                            <el-input
                                v-model="propsFormData.trigger_range.festival_cycle_info.festival_name"
                                type="text"
                                maxlength="10"
                                show-word-limit
                                placeholder="请输入节日名称" />
                        </el-form-item>
                        <el-form-item
                            class="festival_date"
                            label="节日周期"
                            label-width="80px"
                            label-position="left"
                            prop="trigger_range.festival_cycle_info.festival_date">
                            <el-date-picker
                                v-model="propsFormData.trigger_range.festival_cycle_info.festival_date"
                                format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD"
                                placeholder="选择日期" />
                        </el-form-item>
                    </template>
                </el-form-item>
            </template>
            <!-- 客户分层 -->
            <template v-if="propsFormData.trigger_range.sop_scene == 6">
                <el-form-item class="cust_tag_layout" label="触发条件" prop="trigger_range.trigger_condition.tag_ids">
                    <span>当客户</span>
                    <el-select
                        v-model="propsFormData.trigger_range.trigger_condition.tag_type"
                        class="cust_tag_type mar10"
                        placeholder="包含以下任一标签">
                        <el-option value="1" label="包含以下任一标签">包含以下任一标签</el-option>
                        <el-option value="2" label="包含以下所有标签">包含以下所有标签</el-option>
                    </el-select>
                    <span>时，触发该SOP</span>
                    <div class="add-btn">
                        <el-button plan :icon="Plus" @click="openAddTag(2)">添加标签</el-button
                        ><span v-show="AllTagList.length > 0">
                            已选标签
                            <span class="tag-num">{{ AllTagList.length }}</span>
                            个
                        </span>
                        <div>
                            <el-tag
                                v-for="(item, index) in AllTagList.slice(0, 6)"
                                :key="index"
                                class="tag-item"
                                :closable="!propsLook"
                                @close="handleTagClose(item, 2)"
                                >{{ item.name }}</el-tag
                            >
                            <el-tag v-if="AllTagList.length > 6" class="tag-item tag-many" @click="openAddTag(2)"
                                >...</el-tag
                            >
                        </div>
                    </div>
                </el-form-item>
            </template>
            <!-- 过滤条件 -->
            <template
                v-if="
                    [2, 3, 4].includes(propsFormData.trigger_range.sop_scene) &&
                    propsFormData.trigger_range.is_filter == 1
                ">
                <el-form-item class="mar0_form_item" label="过滤条件">
                    <el-switch
                        v-model="propsFormData.trigger_range.is_filter"
                        active-value="1"
                        inactive-value="2"
                        @change="filterType"></el-switch>
                </el-form-item>
                <el-form-item
                    v-if="propsFormData.trigger_range.is_filter == 1"
                    ref="filter_condition"
                    class="notShow_formItem_required"
                    label=" "
                    prop="trigger_range.filter_condition">
                    <div>
                        <span>当处于</span>
                        <el-select
                            v-model="propsFormData.trigger_range.filter_type"
                            class="mar10"
                            placeholder="包含以下任意标签">
                            <el-option :value="1" label="包含以下任意标签">包含以下任意标签</el-option>
                            <el-option :value="2" label="包含以下所有标签">包含以下所有标签</el-option>
                        </el-select>
                        <span>的客户不会触发该SOP</span>
                    </div>
                    <div class="tab-box">
                        <el-button @click="openTag">选择标签</el-button>
                        <p>
                            <el-tag
                                v-for="item in AllTagList"
                                :key="item.id"
                                class="tag_item"
                                size="small"
                                type="warning"
                                :closable="!propsLook"
                                @close="handleClose2(item)">
                                {{ item.name }}
                            </el-tag>
                        </p>
                    </div>
                </el-form-item>
            </template>
        </el-form>
        <!--选择成员 -->
        <ZWDepart ref="DepartRef" :type="1" @submit="getDepart" />
        <!-- 客户标签 -->
        <ZWSelectTag ref="uploadSelectRef" @submit="getTags" />
        <!-- 节假日 -->
        <ZWHoliday ref="ZWHolidayRef" @submit="getHoliday" />
        <!--打标签弹框-->
        <!-- <BatchLabel ref="BatchLabelRef" @save="handleSubmitTag"></BatchLabel> -->
        <ZwBatchLabel ref="BatchLabelRef" @save="handleSubmitTag"></ZwBatchLabel>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, watch, toRefs } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import ZWDepart from '@/components/ZWDepart.vue';
import ZWHoliday from '@/components/ZWHoliday.vue';
// import BatchLabel from '@/components/BatchLabel2.0.vue';
import ZWSelectTag from './ZWSelectTag.vue';
import { defaultTime } from '@/utils/utils';
import { ElMessage } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
import { stageList } from '@/api/customerCenter/labellagroup';
import { getSetionId } from '@/utils/utils';
import { scene } from '@/api/smartMarketing/sop';
import { Plus } from '@element-plus/icons-vue';
import { cloneDeep } from 'lodash';

const props = defineProps(['formData', 'look']);
const creators = ref([]);
const AllTagList = ref([]);
const state_list = ref([]);
const holiday_list = ref([]);
const router = useRouter();
const route = useRoute();
const formRef = ref<FormInstance>();
const DepartRef = ref(null);
const ZWHolidayRef = ref(null);
const uploadSelectRef = ref(null);
const filter_condition = ref(null);
const BatchLabelRef = ref(null);

const sopSence = ref([]);

const propsFormData = ref(props.formData);
const targetTag = ref([]);
const tageType = ref(1);
const propsLook = ref(props.look);
const tagTypeList = ref([
    {
        id: 1,
        name: '包含以下任一标签'
    },
    {
        id: 2,
        name: '包含以下所有标签'
    },
    {
        id: 3,
        name: '不包含以下任一标签'
    },
    {
        id: 4,
        name: '不包含以下所有标签'
    },
    {
        id: 5,
        name: '标签为空'
    },
    {
        id: 6,
        name: '标签不为空'
    }
]);
const getSopSence = async () => {
    const res = await scene();
    sopSence.value = res;
};
const disabledDate = (time: any) => {
    return time.getTime() < Date.now() - 8.64e7;
};
// 自定义校验目标客户
const validateCustType = (rule: any, value: any, callback: any) => {
    if (propsFormData.value.trigger_range.target_cust_type == 2) {
        if ([1, 2, 3, 4].includes(value) && targetTag.value.length == 0) {
            callback(new Error('请至少添加一个标签'));
        } else {
            callback();
        }
    } else {
        callback();
    }
};
const formRule = reactive<FormRules>({
    name: [
        { required: true, message: '规则名称不能为空', trigger: 'blur' },
        { message: '规则名称最多15个字', max: 15 }
    ],
    validity_type: { required: true, message: '规则名称不能为空', trigger: 'change' },
    validity_time: { required: true, message: '规则有效期不能为空', trigger: ['change', 'blur'] },
    trigger_range: {
        sop_scene: { required: true, message: 'SOP场景不能为空', trigger: 'change' },
        trigger_staff: { required: true, message: '触发员工不能为空', trigger: 'change' },
        birth_cycle: { required: true, message: '生日周期不能为空', trigger: 'change' },
        festival_cycle: { required: true, message: '节日周期不能为空', trigger: 'change' },
        wake_object: { required: true, message: '唤醒对象不能为空', trigger: 'change' },
        trigger_condition: {
            type: { required: true, message: '客户阶段不能为空', trigger: 'change' },
            cust_stage: { required: true, message: '客户阶段不能为空', trigger: 'change' },
            tag_ids: { required: true, message: '客户标签不能为空', trigger: 'blur' }
        },
        trigger_work_user_ids: { required: true, message: '指定员工不能为空', trigger: 'change' },
        filter_condition: { required: true, message: '客户标签不能为空', trigger: 'change' },
        cust_stage: {
            stage_id: { required: true, message: '客户阶段不能为空', trigger: 'change' }
        },
        assign_work_user_ids: [
            { required: true, message: '指定员工不能为空', trigger: 'blur' },
            { required: true, max: 10, message: '指定员工最多10位', trigger: 'blur' }
        ],
        festival_cycle_info: {
            festival_date: { required: true, message: '节日不能为空', trigger: 'change' },
            festival_name: { required: true, message: '节日名称不能为空', trigger: 'change' }
        },
        target_cust_type: { required: true, message: '目标客户不能为空', trigger: 'change' },
        target_cust_tag_type: { required: true, validator: validateCustType, trigger: 'blur' }
    }
});
//打开使用成员弹框
const openDepart = () => {
    DepartRef.value.appDialog.title = '选择员工';
    DepartRef.value.departVisble = true;
    if (DepartRef.value.selectedMember.length > 10) {
        ElMessage.warning('员工最多添加10位');
        return;
    }
    // DepartRef.value.selectedMember = creators.value;
};
// 获取使用成员
const getDepart = (res: any) => {
    if (res.length > 10) {
        ElMessage.warning('员工最多添加10位');
        // DepartRef.value.selectedMember = [];
        // DepartRef.value.removeItem([]);
        return;
    }
    creators.value = res;
    DepartRef.value.departVisble = false;
    propsFormData.value.trigger_range.trigger_work_user_ids = getSetionId('id', creators.value);
    formRef.value.validateField(
        ['trigger_range.trigger_work_user_ids'],
        propsFormData.value.trigger_range.trigger_work_user_ids
    );
};
// 删除
const removeDepart = (key: number) => {
    const arr = creators.value.find((item: any) => item.id == key);
    creators.value = creators.value.filter((item: any) => item.id !== key);
    DepartRef.value.removeItem(arr);
    propsFormData.value.trigger_range.trigger_work_user_ids = getSetionId('id', creators.value);
};
// 打开节日的弹框
const openHoliday = () => {
    if (propsLook.value) return;
    ZWHolidayRef.value.appDialog.visible = true;
    ZWHolidayRef.value.selectValue = propsFormData.value.trigger_range.festival_cycle_info.festival_date;
};
// 获取节日
const getHoliday = (res: any) => {
    propsFormData.value.trigger_range.festival_cycle_info.festival_date = res.date;
    propsFormData.value.trigger_range.festival_cycle_info.festival_name = res.festival_name;
    holiday_list.value = [res];
};
// 切換節日
const changeFestival = (val: string) => {
    propsFormData.value.trigger_range.festival_cycle_info.festival_date = '';
    propsFormData.value.trigger_range.festival_cycle_info.festival_name = '';
    holiday_list.value = [];
};
const openTag = () => {
    uploadSelectRef.value.showCreatTag = true;
    uploadSelectRef.value.appDialog.visible = true;
    uploadSelectRef.value.selectTags = AllTagList.value;
};
// 获取标签
const getTags = (data: any) => {
    AllTagList.value = data;
    if (propsFormData.value.trigger_range.is_filter == 1 && propsFormData.value.trigger_range.sop_scene != 6) {
        propsFormData.value.trigger_range.filter_condition = getSetionId('id', data);
        filter_condition.value.clearValidate();
    }
    if (propsFormData.value.trigger_range.sop_scene == 6) {
        propsFormData.value.trigger_range.trigger_condition.tag_ids = getSetionId('id', data);
    }
};
// 删除所选标签
const handleClose = (data: any) => {
    if (propsFormData.value.trigger_range.is_filter == 1) {
        propsFormData.value.trigger_range.filter_condition = data;
    } else {
        propsFormData.value.trigger_range.trigger_condition.tag_ids = data;
    }
    propsFormData.value.trigger_range.trigger_condition.tag_ids = data;
    AllTagList.value = AllTagList.value.filter((item: any) => data.includes(item.id));
    uploadSelectRef.value.selectTags = AllTagList.value;
};
const handleClose2 = (data: any) => {
    const index = AllTagList.value.findIndex((item: any) => item.id == data.id);
    AllTagList.value.splice(index, 1);
    propsFormData.value.trigger_range.filter_condition = getSetionId('id', AllTagList.value);
};
// 客户阶段数落
const getState = () => {
    stageList({
        page: 1,
        page_size: 100
    }).then((res: any) => {
        const arr = [];
        arr.push({ id: '0', name: '请选择客户阶段' });
        res.map((item: any) => (item.id = item.id + ''));
        state_list.value = [...arr, ...res];
    });
};
// 客户阶段 过滤
const filterType = (val: string) => {
    // 关闭
    if (val == 2) {
        AllTagList.value = [];
        propsFormData.value.trigger_range.filter_condition = AllTagList.value;
        uploadSelectRef.value.selectTags = AllTagList.value;
    }
};
// 切换指定员工
const changeSopsence = (val: string) => {
    if (val == 3) propsFormData.value.trigger_range.trigger_condition.cust_stage = '';

    // console.log(val, '---------------', propsFormData.trigger_range)
    propsFormData.value.trigger_range.trigger_staff = '1';
    // 指定员工空
    creators.value = [];
    propsFormData.value.trigger_range.trigger_work_user_ids = [];
    DepartRef.value.removeItem([]);
};

// 标签弹框保存
const handleSubmitTag = (tag: any) => {
    BatchLabelRef.value.dialogVisible = false;
    if (tageType.value == 1) {
        targetTag.value = tag.data;
        propsFormData.value.trigger_range.target_cust_tag_ids = tag.idList;
        formRef.value.clearValidate('trigger_range.target_cust_tag_type');
    } else {
        AllTagList.value = tag.data;
        propsFormData.value.trigger_range.trigger_condition.tag_ids = tag.idList;
        formRef.value.clearValidate('trigger_range.trigger_condition.tag_ids');
    }
};

// 打开选择标签
const openAddTag = (val: any) => {
    if (propsLook.value) {
        return;
    }
    tageType.value = val;
    if (val == 1) {
        BatchLabelRef.value.chooseDataArr = [...targetTag.value];
    } else {
        BatchLabelRef.value.chooseDataArr = [...AllTagList.value];
    }
    BatchLabelRef.value.dialogVisible = true;
    BatchLabelRef.value.title = '选择标签';
    BatchLabelRef.value.hasConditiion = false;
};

// 删除标签
const handleTagClose = (val: any, type: any) => {
    if (type == 1) {
        targetTag.value = targetTag.value.filter((item: any) => item.id != val.id);
        propsFormData.value.trigger_range.target_cust_tag_ids =
            propsFormData.value.trigger_range.target_cust_tag_ids.filter((item: any) => item != val.id);
    } else {
        AllTagList.value = AllTagList.value.filter((item: any) => item.id != val.id);
        propsFormData.value.trigger_range.trigger_condition.tag_ids =
            propsFormData.value.trigger_range.trigger_condition.tag_ids.filter((item: any) => item != val.id);
    }
};
// 切换选择标签类型
const changeTagType = (val: any) => {
    formRef.value.clearValidate('trigger_range.target_cust_tag_type');
    if (val == 5 || val == 6) {
        targetTag.value = [];
        propsFormData.value.trigger_range.target_cust_tag_ids = [];
    }
};
// next
const next = () => {
    return formRef.value.validate((valid: boolean, fileds: any) => {
        if (propsFormData.value.trigger_range.trigger_staff == 2) {
            if (propsFormData.value.trigger_range.trigger_work_user_ids.length == 0) {
                ElMessage.warning('指定员工不能为空！');
            }
            if (propsFormData.value.trigger_range.trigger_work_user_ids.length > 10) {
                ElMessage.warning('指定员工最多添加10位！');
            }
        }

        return valid;
    });
};
onMounted(() => {
    getState();
    getSopSence();
});
defineExpose({
    next,
    creators,
    AllTagList,
    targetTag,
    holiday_list
});
</script>

<style lang="scss" scoped>
.step1 {
    .con_title {
        font-size: 16px;
        font-family: PingFangSC-Medium, 'PingFang SC';
        font-weight: 500;
        color: #33302d;
        margin-bottom: 20px;
    }

    .step1_two {
        border-top: 1px solid #eaeaea;
        padding-top: 30px;
    }

    .step_form {
        padding-bottom: 18px;

        .mar0_form_item {
            margin-bottom: 0;
        }

        .el-form-item {
            width: 710px;
        }

        .cust_state_box {
            width: 1000px;

            span {
                margin: 0 10px;
            }

            .cust_stage_type {
                width: 200px;
            }

            .cust_stage_number {
                width: 120px;
            }
        }

        .cust_message_box {
            .cust_message_min {
                width: 180px;
                margin: 0 10px;
            }

            .cust_message_time {
                width: 80px;
            }
        }

        .birth_container {
            :deep .birth_pick {
                margin: 0 10px;
                width: 200px;
            }
        }

        .cust_tag_layout {
            width: 1000px;

            .cust_tag_selet {
                width: 200px;
            }

            .cust_tag_type {
                width: 160px;
            }
        }

        .festival_name {
            width: 300px;
        }

        .festival_date {
            margin-top: 10px;
        }

        .mar10 {
            margin: 0 10px;
        }

        .tag-item {
            margin: 2px 5px;
        }

        .tag-many {
            cursor: pointer;
        }

        .tag-num {
            font-size: 16px;
            font-weight: 600;
        }
    }

    .user_list {
        margin-top: 10px;

        .user_item_tag {
            height: 22px;
            background: #fffaf9;
            border: 1px solid #fffaf9;
            border-radius: 1px;
            margin-right: 8px;
            font-size: 14px;
            line-height: 22px;
            font-family: STHeitiSC-Light, STHeitiSC;
            font-weight: 300;
            color: #35383a;

            .tag_icon {
                width: 10px;
                margin-right: 10px;
            }
        }
    }
}

.tab-box {
    margin-top: 16px;

    .tag_item {
        margin-right: 6px;
    }
}

.reply {
    display: flex;
    align-items: center;
}

:deep(.view_icon) {
    margin: 3px 0 0 3px;
}

.goOpen {
    color: #ff6b00;
    cursor: pointer;
}

.trigger_item {
    margin: 14px 0;
}

.tag_select {
    margin: 0 10px;
}

.add-btn {
    margin: 10px 0;

    .el-button {
        margin-right: 10px;
    }
}
</style>
